<template>
	<div id="box">
		<header class="head">
            <div @click="ppp"><router-link tag="i" to="/" class="iconfont icon-left"></router-link></div>
            <div>发现</div>
            <div></div>
        </header>
        <article class="atc">
            <div>
                <div>
                    <div>
                        <p>金币商城</p>
                        <p>各种好物在这里</p>
                    </div>
                </div>
                <div>
                    <div>
                        <p>金币商城</p>
                        <p>各种好物在这里</p>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <p>金币商城</p>
                        <p>各种好物在这里</p>
                    </div>
                </div>
                <div>
                    <div>
                        <p>金币商城</p>
                        <p>各种好物在这里</p>
                    </div>
                </div>
                <div>
                    <div>
                        <p>金币商城</p>
                        <p>各种好物在这里</p>
                    </div>
                </div>
            </div>
        </article>
        <div class="dt">
            <img src="static/img/fx2.webp">
        </div>
        <div v-for="v in 3" class="content">
            <div class="tj">
                <div id="pp"><div id="p">美食热推</div></div>
                <p>你的口味，我都懂得</p>
            </div>
            <div class="dl">
                <dl>
                    <dt><img src="static/img/fx1.webp" alt=""></dt>
                    <dd>小题大做蜜汁口味</dd>
                    <dd>￥16</dd>
                </dl>
                <dl>
                    <dt><img src="static/img/fx1.webp" alt=""></dt>
                    <dd>小题大做蜜汁口味</dd>
                    <dd>￥16</dd>
                </dl>
                <dl>
                    <dt><img src="static/img/fx1.webp" alt=""></dt>
                    <dd>小题大做蜜汁口味</dd>
                    <dd>￥16</dd>
                </dl>
            </div>
            <p>查看更多 ></p>
        </div>
	</div>
</template>

<script>
export default {
		data() {
			return {

			}
		},
		methods: {
			//事件
			ppp(){
				for(var i=0;i<this.pp.length;i++){
						this.pp[i].style.color = "#9c9c9c";
				}
				this.pp[0].style.color = "#0699ff";
			},
		},
		mounted(){
			//原生js
			this.pp=document.querySelectorAll(".foot>p");
		}
	}
</script>

<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
#box{
    background: rgb(245,245,245)
}
.head{
    background: rgb(0,143,255);
    color: #fff;
    .px2rem(height,44);
    .px2rem(padding,15);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    font-weight:bold;
    .px2rem(font-size,20); 
	i{
    	.px2rem(font-size,20); 
	}
	div:last-child{
		.px2rem(width,20); 
	}
}
.atc{
    .px2rem(height,240);
    background: rgb(245,245,245);
    display: flex;
    &>div{
        flex: 1;
        display: flex;
        flex-direction: column;
        &>div{
            flex: 1;
            .px2rem(margin,1);
            background:url("/static/img/fx3.webp") no-repeat;
            background-color: #fff;
            .px2rem(background-size,42); 
            background-position:85% center; 
            div{
                .px2rem(margin,15);
                .px2rem(margin-top,24);
                p:first-child{
                    color: red;
                    .px2rem(margin-bottom,10);
                    .px2rem(font-size,14);
                }
                p:last-child{
                    color: #999;
                }
            }
        }
    }
    &>div:first-child{
        &>div:first-child{
            flex: 2; 
            background-position:80% 80%;
        }
    }
}
.dt{
    .px2rem(height,90);
    .px2rem(margin-top,12);
    .px2rem(margin-bottom,12);
    img{
        width: 100%;
        height: 100%;
        background: #fff;
    }
}
.content{
    background: #fff;
    .px2rem(margin-bottom,12);
    .tj{
		position:relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .px2rem(height,63);
        div{
            .px2rem(font-size,25);
			font-weight:bold;
        }
        p{
            color: #999;
        }
    }
    .dl{
        display: flex;
        .px2rem(padding,13);
		justify-content: space-around;
        dl{
            .px2rem(margin,3);
            display: flex;
            flex-direction: column;
            dt{
                .px2rem(width,110);
                .px2rem(height,110);
                img{
                    width:100%;
                    height: 100%;
                    background: #999;
                }
            }
            dd:first-of-type{
                .px2rem(margin-top,10);
                .px2rem(margin-bottom,10);
            }
            dd:last-of-type{
                color: #ff0000;
            }
        }
    }
    &>p:last-child{
        .px2rem(line-height,44);
        text-align: center;
    }
}
#p::after,#p::before{
	content: "";
	position: absolute;
	.px2rem(width,50);
	border: 1px solid #000;
	.px2rem(border-width,1)
}
#p::after{
	left: 68%;
	top: 42%;
}
#p::before{
	left: 18%;
	top: 42%;
}
</style>